<!DOCTYPE html>
<html>
<head>
  <title>Popcorn YouTube Player - IE8 Shim</title>
  <link rel="stylesheet" href="../test/qunit/qunit.css" type="text/css" media="screen">
  <script src="../test/qunit/qunit.js"></script>
  <!-- Tests the safe-load of Youtube library -->
  <script src="http://s.ytimg.com/yt/jsbin/www-widgetapi-vflCAfh6H.js"></script>
  <!--
    do not move - this must be called immediately prior to popcorn.js.
  -->
  <script src="popcorn.ie8.js"></script>
  <script src="../popcorn.js"></script>
  <script src="../modules/player/popcorn.player.js"></script>
  <script src="../players/youtube/popcorn.youtube.js"></script>
  <script src="../players/youtube/popcorn.youtube.unit.js"></script>
  <script src="../test/inject.js"></script>
  <script src="../test/popcorn.inject.js"></script>
</head>
<body>
  <h1 id="qunit-header">Popcorn YouTube Player Plugin - with IE8 Shim</h1>
  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
  <div id="qunit-fixture"></div>

  <p>
    Note about this set of tests:
  </p>

  <p>
    The test assumes that the YouTube video is mostly loaded, before it is run.
    Therefore, if failures occur for the first time, just run it again. Likely,
    failures would disappear the second time.
  </p>
  <p>
    There will be two separate youtube videos visible after the completion of these tests.
  </p>
  <div id="video" style="width: 360px; height: 300px" ></div>
  <div id="video2" style="width: 360px; height: 300px" ></div>
  <div id="video3" style="width: 360px; height: 300px" ></div>
  <div id="video4"></div>
  <div id="video5" style="width: 0px; height: 0px" ></div>
  <div id="video6" style="width: 360px; height: 300px" ></div>
  <div id="video7" style="width: 360px; height: 300px" ></div>
  <div id="video8" style="width: 360px; height: 300px" ></div>
  <div id="video9" style="width: 360px; height: 300px" ></div>
  <div id="video10" style="width: 360px; height: 300px" ></div>
  <div id="video11" style="width: 360px; height: 300px" ></div>
  <div id="video12" style="width: 360px; height: 300px" ></div>
  <div id="video13" style="width: 360px; height: 300px" ></div>
  <div id="video14" style="width: 360px; height: 300px" ></div>
  <div id="video15" style="width: 360px; height: 300px" ></div>
  <div id="video16" style="width: 360px; height: 300px" ></div>
</body>
</html>
